// 试题预览
<template>
  <div class="preview-questions">
    <el-row :gutter="20">
      <el-col :span="6"
        >【题型】：
        <span v-if="question.questionType === '1'">单选题</span>
        <span v-else-if="question.questionType === '2'">多选题</span>
        <span v-else>简答题</span>
      </el-col>
      <el-col :span="6"
        >【编号】：
        {{ question.id }}
      </el-col>
      <el-col :span="6"
        >【难度】：
        <span v-if="question.difficulty === '1'">简单</span>
        <span v-else-if="question.difficulty === '2'">一般</span>
        <span v-else>困难</span>
      </el-col>
      <el-col :span="6"
        >【标签】：
        {{ question.tags }}
      </el-col>

      <el-col :span="6"
        >【学科】：
        {{ question.subjectName }}
      </el-col>
      <el-col :span="6"
        >【目录】：
        {{ question.directoryName }}
      </el-col>
      <el-col :span="6"
        >【方向】：
        {{ question.direction }}
      </el-col>
    </el-row>
    <div class="el-row">
      <div>
        【题干】：
        <p class="bule" v-html="question.question"></p>
      </div>
      <div v-if="question.questionType !== '3'">
        <p>
          <span v-if="question.questionType === '1'">单选题</span>
          <span v-else-if="question.questionType === '2'">多选题</span>
          <span v-else>简答题</span>
          选项：（以下选中的选项为正确答案）
        </p>
        <el-radio-group v-model="checked">
          <el-radio
            :label="index.toString()"
            v-for="(option, index) in question.options"
            :key="index"
            >{{ option.title }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div class="el-row">
      【参考答案】：
      <el-button type="danger" @click="isVideoShow = true"
        >视频答案预览</el-button
      >
      <div class="video" v-show="isVideoShow">
        <video
          class="video"
          controls="controls"
          :src="question.videoURL"
        ></video>
      </div>
    </div>
    <div class="el-row">
      <p>【答案解析】：https://element.eleme.cn/#/zh-CN/component/i18n</p>
    </div>
    <div class="el-row">
      <p>【题目备注】：https://element.eleme.cn/#/zh-CN/component/i18n</p>
    </div>
    <div>
      <p>【题目备注】：{{ question.remarks }}</p>
    </div>

    <div slot="footer" class="dialog-footer ">
      <el-button type="primary" @click="$emit('close')">关 闭</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "PreviewQuestions",
  props: {
    question: {
      type: [Object, String],
      required: true
    }
  },
  data() {
    return {
      checked: "1",
      isVideoShow: false // 视频是否显示
    };
  },
  created() {},
  methods: {}
};
</script>

<style scoped>
.el-col {
  padding: 10px 0;
}
.el-row {
  border-bottom: 1px solid #9a9a9a;
  padding: 10px 0;
}
.bule {
  color: blue;
}
.el-radio {
  display: block;
  padding: 10px;
}
.video {
  width: 400px;
  height: 300px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
}
</style>
